<template>
    <block title="销售渠道占比">
        <div ref="chart" class="chart-p">

        </div>
    </block>
</template>
<script lang="ts" setup>
import tabhead from '@/components/tabhead.vue';
import block from '@/components/block.vue';
import { onMounted, ref } from 'vue';
import echarts from '@/components/echarts';
const chart = ref()
const init = () => {
    
    var myChart = echarts.init(chart.value);
    var option;

    option = {
        tooltip: {
            trigger: 'item',
            formatter: '{b}: {c} ( {d}% )',
        },

        series: [
            {
                name: '销售渠道',
                type: 'pie',
                radius: ['40%', '60%'],

                label: {
                    formatter: '{b}: {d}%',
                    
                     color: '#fff'
                },

                data: [
                    { value: 1048, name: '农场直销' },
                    { value: 735, name: '批发市场' },
                    { value: 580, name: '零售市场' },
                    { value: 484, name: '农产品加工' },
                    { value: 300, name: '餐饮合作' }
                ]
            }
        ]
    };

    option && myChart.setOption(option);
}

onMounted(() => {
    init()
})
</script>
<style scoped>
.chart-p {
    height: 24vh;
}
</style>